<template>
  <div class="feature-container">
    <!-- 导航栏：提供返回功能和面包屑导航 -->
    <div class="navigation-bar">
      <router-link to="/" class="back-btn">
        <span class="back-icon">←</span>
        返回
      </router-link>
      <div class="breadcrumb">
        <router-link to="/" class="breadcrumb-item">工具集合</router-link>
        <span class="separator">/</span>
        <span class="breadcrumb-item current">功能测试</span>
      </div>
    </div>

    <h2>{{ title }}</h2>
    
    <!-- 表单示例：展示基本的表单操作和验证 -->
    <div class="form-section">
      <h3>表单示例</h3>
      <div class="form-group">
        <label>输入文本：</label>
        <input 
          type="text" 
          v-model="inputText" 
          placeholder="请输入文本" 
        />
      </div>

      <div class="form-group">
        <label>选择选项：</label>
        <select v-model="selectedOption">
          <option 
            v-for="option in options" 
            :key="option.value" 
            :value="option.value"
          >
            {{ option.label }}
          </option>
        </select>
      </div>

      <button 
        @click="handleSubmit" 
        :disabled="!isFormValid"
        class="submit-btn"
      >
        提交
      </button>
    </div>

    <!-- 列表示例：展示数据列表的增删改查操作 -->
    <div class="list-section">
      <h3>列表示例</h3>
      <div class="list-header">
        <input 
          type="text" 
          v-model="searchText" 
          placeholder="搜索..." 
          class="search-input"
        />
        <button 
          @click="addItem"
          class="add-btn"
        >
          添加项目
        </button>
      </div>

      <ul class="item-list">
        <li 
          v-for="item in filteredItems" 
          :key="item.id" 
          class="list-item"
        >
          <span class="item-name">{{ item.name }}</span>
          <button 
            @click="deleteItem(item.id)" 
            class="delete-btn"
          >
            删除
          </button>
        </li>
      </ul>
    </div>

    <!-- 计数器示例：展示简单的状态管理和计算属性 -->
    <div class="counter-section">
      <h3>计数器示例</h3>
      <div class="counter-display">
        <button 
          @click="decrement"
          class="counter-btn"
        >
          -
        </button>
        <span class="counter-value">{{ count }}</span>
        <button 
          @click="increment"
          class="counter-btn"
        >
          +
        </button>
      </div>
      <p class="double-value">双倍值：{{ doubleCount }}</p>
    </div>
  </div>
</template>

<script setup>
/**
 * @component TestFeature
 * @description 功能开发模板组件，展示了基本的Vue3组件开发规范和常用功能实现
 * 
 * 组件结构：
 * 1. 导航栏：返回按钮和面包屑导航
 * 2. 表单区域：基础表单元素和验证
 * 3. 列表区域：数据展示和操作
 * 4. 状态管理：响应式数据和计算属性
 * 
 * 开发说明：
 * - 组件需实现 toolInfo 配置用于主页展示
 * - 使用 setup 语法糖进行组件逻辑开发
 * - 保持统一的样式和布局规范
 */

import { ref, computed, onMounted } from 'vue';

const toolInfo = {
  name: 'TestFeature',
    title: '功能测试',          // 工具名称：在工具卡片和导航中显示
    description: '开发模板组件', // 工具描述：简要说明组件用途
    icon: '🔧',                // 工具图标：使用emoji表情或图标
    color: '#4CAF50',         // 主题色：定义组件主要颜色
    category: 'dev'           // 分类：用于工具分类和筛选
  };

// 响应式数据和方法定义
    // 1. 响应式数据定义
    const title = ref('功能测试示例');
    const inputText = ref('');
    const selectedOption = ref('');
    const options = ref([
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' }
    ]);
    const count = ref(0);
    const searchText = ref('');
    const items = ref([
      { id: 1, name: '示例项目1' },
      { id: 2, name: '示例项目2' },
      { id: 3, name: '示例项目3' }
    ]);

    // 2. 计算属性
    const isFormValid = computed(() => {
      return inputText.value.trim() !== '' && selectedOption.value !== '';
    });

    const doubleCount = computed(() => count.value * 2);

    const filteredItems = computed(() => {
      const search = searchText.value.toLowerCase();
      return items.value.filter(item => 
        item.name.toLowerCase().includes(search)
      );
    });

    // 3. 方法定义
    const handleSubmit = () => {
      if (isFormValid.value) {
        console.log('提交数据：', {
          text: inputText.value,
          option: selectedOption.value
        });
        // 在这里处理表单提交逻辑
      }
    };

    const increment = () => count.value++;
    const decrement = () => count.value--;

    const addItem = () => {
      const newId = items.value.length + 1;
      items.value.push({
        id: newId,
        name: `新项目${newId}`
      });
    };

    const deleteItem = (id) => {
      items.value = items.value.filter(item => item.id !== id);
    };

    // 4. 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载');
      // 在这里可以进行初始化操作
    });

    // 5. 返回模板需要使用的数据和方法
    defineExpose({
      title,
      inputText,
      selectedOption,
      options,
      count,
      searchText,
      items,
      isFormValid,
      doubleCount,
      filteredItems,
      handleSubmit,
      increment,
      decrement,
      addItem,
      deleteItem,
      toolInfo
    });
</script>

<style scoped>
/* 导航栏样式 */
.navigation-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 16px 24px;
  border-bottom: 2px solid #e8e8e8;
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
  border-radius: 12px;
  margin: -24px -24px 24px -24px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.back-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
}

.back-btn:hover .back-icon {
  transform: translateX(-4px);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.breadcrumb-item {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 4px 12px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.breadcrumb-item:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.breadcrumb-item.current {
  color: #ffffff;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.separator {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}

/* 容器样式 */
.feature-container {
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.form-section,
.list-section,
.counter-section {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-section:hover,
.list-section:hover,
.counter-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background-color: #f9fafb;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  border-color: #4CAF50;
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
  background-color: #ffffff;
}

/* 按钮基础样式 */
button {
  padding: 12px 24px;
  background: linear-gradient(145deg, #4CAF50, #45a049);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

button:hover {
  background: linear-gradient(145deg, #45a049, #388E3C);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

button:disabled {
  background: linear-gradient(145deg, #e5e7eb, #d1d5db);
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.list-item:hover {
  background-color: #f9fafb;
  transform: translateX(4px);
}

.counter-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 24px 0;
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 12px;
}

.counter-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: linear-gradient(145deg, #4CAF50, #45a049);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
  min-width: unset;
}

.counter-btn:hover {
  background: linear-gradient(145deg, #45a049, #388E3C);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.35);
}

.counter-value {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  min-width: 60px;
  text-align: center;
}

.double-value {
  color: #6b7280;
  font-size: 14px;
  margin: 8px 0 0;
  text-align: center;
}
.form-group {
  margin-bottom: 20px;
}

.submit-btn {
  margin-top: 24px;
  width: 100%;
  max-width: 200px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.search-input {
  flex: 1;
  max-width: 300px;
}

.add-btn {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.add-btn:hover {
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.delete-btn {
  background: linear-gradient(145deg, #ef4444, #dc2626);
  min-width: 80px;
  padding: 8px 16px;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.delete-btn:hover {
  background: linear-gradient(145deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}